<template>
  <div class="interview-information">
    <div class="interview-information-item">
      <div class="interview-header-title">
        <div class="title">面试信息</div>
        <div>
          <span class="title">面试情况</span>
          <span v-if="data.status == 0" style="margin:0 10px">
            <el-button type="success" @click="operate('success')">审核通过</el-button>
            <el-button type="danger" @click="operate('fail')">审核失败</el-button>
          </span>
          <el-tag v-if="data?.status == 0" type="warning">待审核</el-tag>
          <el-tag v-if="data?.status == 1" type="success">审核成功</el-tag>
          <el-tag v-if="data?.status == 2" type="danger">审核失败</el-tag>
        </div>
      </div>
      <div class="interview-information-container">
        <el-descriptions class="margin-top" :column="4" border>
          <el-descriptions-item v-for="(item,index) in userInterviewInfo" :key="index">
            <template slot="label">{{ item.label }}</template>
            <div v-if="item.value == '点击查看'" class="look-user-info" @click="lookFile(item)">
              {{ item.value }}<i class="el-icon-view" />
            </div>
            <div v-else>{{ item.value }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <div class="work-experience">
      <div class="work-experience-title">
        <span>工作经历</span>
      </div>
      <el-table :data="work" style="width: 100%">
        <el-table-column prop="companyName" label="公司" />
        <el-table-column prop="beginDate" label="开始时间" />
        <el-table-column prop="endDate" label="结束时间" />
        <el-table-column prop="department" label="部门" />
        <el-table-column prop="position" label="职位" />
        <el-table-column prop="reason_leaving" label="离职原因" />
        <el-table-column prop="company_telephone" label="公司电话" />
        <el-table-column prop="salary" label="薪资" />
        <el-table-column prop="jobDescription" label="工作内容" />
      </el-table>
    </div>

    <div class="educational-experience">
      <div class="educational-experience-title">
        <span>教育经历</span>
      </div>
      <el-table :data="education" style="width: 100%">
        <el-table-column prop="schoolName" label="学校" />
        <el-table-column prop="beginDate" label="开始时间" />
        <el-table-column prop="endDate" label="结束时间" />
        <el-table-column prop="major" label="专业" />
        <el-table-column label="学历">
          <!-- <template slot-scope="scope">
              <span>{{ getDegree(scope.row, "learning_nature", "暂无") }}</span>
            </template> -->
        </el-table-column>
        <el-table-column prop="certificate" label="证书" />
        <el-table-column prop="certificate_number" label="证书编号" />
      </el-table>
    </div>

    <div class="skills-certificate">
      <div class="skills-certificate-title">
        <span>技能证书</span>
      </div>
      <el-table :data="certificateList" style="width: 100%" border>
        <el-table-column prop="name" label="证书名称" />
        <el-table-column prop="expire_at" label="到期时间" />
        <el-table-column label="附件">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.attachment"
              type="text"
              @click="handleDownloadFile(scope.row.attachment)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="确认信息"
      :visible.sync="confirmDialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="员工身份" prop="data.identity">
          <el-radio-group v-model="form.data.identity" @change="selectIdentity">
            <el-radio :label="0">正式员工</el-radio>
            <el-radio :label="1">实习员工</el-radio>
            <el-radio :label="2">试用员工</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="form.data.identity"
          :label="form.data.identity == 1 ? '实习薪资:' : '试用薪资:'"
          prop="data.practice_salary"
        >
          <el-input-number v-model="form.data.practice_salary" :min="0" />
        </el-form-item>
        <el-form-item
          :label="form.data.identity == 0?'劳动合同':form.data.identity == 1?
            '实习时间':'试用时间'"
          prop="practice"
          :rules="[
            {
              required: true,
              message: '请输入时间',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-date-picker
            v-model="form.practice"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changePractice"
          />
        </el-form-item>
        <el-form-item v-if="!form.data.identity" label="员工薪资" prop="data.practice_salary">
          <el-input-number v-model="form.data.practice_salary" :min="0" />
        </el-form-item>
        <el-form-item label="入职时间" prop="time_zone">
          <el-date-picker
            v-model="form.time_zone"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item v-if="form.data.identity" label="转正薪资">
          <el-input v-model="form.salary_more" style="width: 45%;" />
          <span>至</span>
          <el-input v-model="form.salary_less" style="width: 45%;" />
        </el-form-item>
        <el-form-item label="修改部门">
          <!-- {{ form.dept?.name }} -->
          <CheckDept
            v-if="confirmDialogVisible"
            :id="form.applied_department"
            @check="checkDepartment"
          />
        </el-form-item>
        <el-form-item label="修改岗位">
          <el-select v-model="form.data.applied_position" placeholder="请选择">
            <el-option
              v-for="item in position"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading"
          @click="confirm('form')"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="确认信息"
      :visible.sync="refuseVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form ref="form" :model="refuseForm" label-width="120px">
        <el-form-item label="拒绝理由">
          <el-input v-model="refuseForm.fail_reason" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading"
          @click="refuseConfirm"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="showPreview"
      :title="previewTitle"
      :close-on-click-modal="false"
      width="10%"
    >
      <el-image
        :src="previewImageUrl"
        :preview-src-list="srcList"
        class="show-preview-img"
      />
    </el-dialog>
  </div>
</template>
<script>
import { getPosition } from '@/api/basic'
import { getDept } from '@/api/v2/basic'
import { examineInterview } from '@/api/v2/entry'

import CheckDept from '@/components/Check/Dept'
import { getFileType } from '@/utils/handelFile'
import { handleFiledByID, mapFields } from '@/utils/handleData'
import { getFiledListInfo } from '@/hooks/userField'
export default {
  components: { CheckDept },
  props: {
    data: {
      type: Object,
      required: true
    },
    userInterviewInfo: {
      required: true
    },
    experienceInfo: {
      required: true
    }
  },
  data() {
    return {
      loading: false,
      work: [],
      education: [],
      fieldList: [],
      certificateList: [],
      confirmDialogVisible: false,
      refuseVisible: false,
      showPreview: false,
      previewImageUrl: '',
      previewTitle: '',
      srcList: [],
      form: {
        time_zone: '',
        practice: '',
        salary_more: '',
        salary_less: '',
        applied_department: '',
        data: {
          identity: 1,
          practice_salary: ''
        }
      },
      rules: {
        'data.identity': [
          {
            required: true,
            message: '请选择员工身份',
            trigger: ['blur', 'change']
          }
        ],
        'data.practice_salary': [
          {
            required: true,
            message: '请输入薪资',
            trigger: ['blur', 'change']
          },
          {
            validator: (rule, value, callback) => {
              let practice_salary = 0
              switch (typeof this.form.data.practice_salary) {
                case 'string':
                  practice_salary = parseFloat(this.form.data.practice_salary)
                  if (isNaN(practice_salary)) callback(new Error('请输入薪资'))
                  break

                case 'number':
                  practice_salary = this.form.data.practice_salary
                  break

                default:
                  callback(new Error('请输入薪资'))
              }

              if (practice_salary < 0) callback(new Error('薪资不能为负值'))

              callback()
            },
            trigger: ['blur']
          }
        ],
        time_zone: [
          {
            required: true,
            message: '请选择入职时间',
            trigger: ['blur', 'change']
          }
        ]
      },
      refuseForm: {
        fail_reason: ''
      },
      position: [],
      departmentOptions: []
    }
  },
  watch: {
    experienceInfo(old, val) {
      if (old) {
        this.experienceInfo.forEach(item => {
          const { label } = item
          if (label === '工作经历') {
            this.work = item.value
          } else if (label === '教育经历') {
            this.education = item.value
          } else if (label === '证书列表') {
            this.certificateList = item.value
          }
        })
      }
    }
  },
  created() {
    this.getFieldsList()
  },
  methods: {
    handleDownloadFile(file) {
      window.open(file)
    },

    selectIdentity(value) {
      this.$refs.form.resetFields()
      this.form.data = {
        identity: value,
        practice_salary: ''
      }
    },
    lookFile(item) {
      const type = getFileType(item?.url)
      switch (type) {
        case 0:
          this.srcList = []
          this.srcList.push(item?.url)
          this.previewImageUrl = item?.url
          this.previewTitle = item.label + '预览'
          this.showPreview = true
          console.log(this.srcList)
          break
        case 1:
          window.open(item?.url)
          this.$message.success(item.label + '下载成功')
          break
        case -1:
          this.$message.error('用户未上传' + item.label)
          break
      }
    },
    operate(type) {
      switch (type) {
        case 'success':
          this.getDepartment()
          this.getPosition()
          this.form.applied_department = handleFiledByID(this.data?.trend, 'value', 'applied_department')
          this.form.data.applied_department = handleFiledByID(this.data?.trend, 'value', 'applied_department')
          this.confirmDialogVisible = true
          break
        case 'fail':
          this.refuseVisible = true
          break
      }
    },
    async getDepartment() {
      try {
        const res = await getDept()
      } catch (error) {
        console.log(error, 'getDepartment')
      }
    },
    async getPosition() {
      try {
        const { data } = await getPosition()
        this.position = data
      } catch (error) {
        console.log(error, 'getPosition')
      }
    },
    async getFieldsList() {
      const data = await getFiledListInfo(['interviews'], 1)
      this.fieldList = data
    },
    async checkDepartment(data) {
      this.form.data.applied_department = data.data.id
      console.log(data)
    },
    changePractice(val) {
      if (val) {
        if (this.form.data.identity === 0) {
          const startData = val[0].split('-')
          const endData = val[1].split('-')
          this.form.data.startYear = startData[0]
          this.form.data.startMonth = startData[1]
          this.form.data.startDay = startData[2]
          this.form.data.endYear = endData[0]
          this.form.data.endMonth = endData[1]
          this.form.data.endDay = endData[2]
        } else {
          this.form.data.practice_start_at = val[0]
          this.form.data.practice_end_at = val[1]
        }
      } else {
        delete this.form.data?.startYear
        delete this.form.data?.startMonth
        delete this.form.data?.startDay
        delete this.form.data?.endYear
        delete this.form.data?.endMonth
        delete this.form.data?.endDay
        delete this.form.data?.practice_start_at
        delete this.form.data?.practice_end_at
      }
    },
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.salary_less && this.form.salary_more) {
            if (this.form.salary_more / 1 <= this.form.salary_less / 1) {
              this.form.data.regular_salary = this.form.salary_less + '-' + this.form.salary_more
            } else {
              this.$message.error('转正薪资最小值不可大于最大值')
            }
          }
          this.form.data = mapFields(this.form.data, this.fieldList)
          const { data, time_zone } = this.form
          const params = {
            examine: 1,
            id: this.$route.params.id,
            time_zone: {startDate:time_zone[0],endDate:time_zone[1]},
            data: JSON.stringify(data)
          }
          console.log( params,'params');
          this.interviewApi(params)
        } else {
          this.$message.error('请填写完所有必填字段')
        }
      })
    },
    refuseConfirm() {
      const params = {
        examine: 2,
        id: this.$route.params.id,
        fail_reason: this.refuseForm.fail_reason
      }
      this.interviewApi(params)
    },
    async interviewApi(params) {
      try {
        await examineInterview(params)
        this.$emit('change')
        this.$message.success('审核成功')
        this.confirmDialogVisible = false
        this.refuseVisible = false
      } catch (error) {
        this.$message.error('审核失败')
        console.log(error, 'interviewApi')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.interview-information{
  padding: 20px;
  &-item{
    .interview-header-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0;
        padding-right: 20px;
      }
    }

    .interview-information-container{
      .look-user-info{
        color: #1890FF;
        cursor: pointer;
      }
    }
  }

  .work-experience{
    &-title{
      font-size: 16px;
      font-weight: bold;
      margin: 20px 0;
    }
  }

  .educational-experience{
    &-title{
      font-size: 16px;
      font-weight: bold;
      margin: 20px 0;
    }
  }

  .skills-certificate{
    &-title{
      font-size: 16px;
      font-weight: bold;
      margin: 20px 0;
    }
  }

  .show-preview-img{
    width: 200px;
    height: 200px;
    margin-left: 30%;
  }
}
</style>
